<template>
    <div style="width: 100%; height: 100%;">
        <div style="height: 50px; width: calc(100% -40px); padding: 0 20px;">

            <el-button :icon="isCollapse?'el-icon-s-unfold':'el-icon-s-fold'"
                type="text" @click="changeCollapse" style="font-size: 25px; line-height: 26px; float: left;"/>

            <el-breadcrumb separator="/" style="float: left; line-height: 50px; margin-left: 30px;">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item><a href="/">活动管理</a></el-breadcrumb-item>
                <el-breadcrumb-item>活动列表</el-breadcrumb-item>
                <el-breadcrumb-item>活动详情</el-breadcrumb-item>
            </el-breadcrumb>

            <div style="float: right; height: 100%; line-height: 50px;">
                <el-dropdown trigger="click">
                    <span style="cursor: pointer;">
                        <el-avatar size="medium" style="margin-top: 7px; float: left;">科小新</el-avatar>
                        <span style="float: left; margin-left: 10px;">管理员</span>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item>个人信息</el-dropdown-item>
                        <el-dropdown-item>注销</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>

        </div>

        <div style="height: 30px; width: 100%;
            box-shadow: 0 1px 3px 0 rgba(0,0,0,.12), 0 0 3px 0 rgba(0,0,0,.04);">

        </div>
    </div>
</template>

<script>
    export default {
        props: {
            isCollapse: Boolean
        },
        methods: {
            changeCollapse() {
                this.$emit('changeCollapse');
            }
        }
    }
</script>